<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.rangeMain {
      background-size: 98% 3px;
      margin: auto;
      width: 80%;
      background: linear-gradient(to right, #ccc 0%, #ccc 100%);
      outline: none;
      -webkit-appearance: none; /*清除系统默认样式*/
      height: 3px; /*横条的高度*/
     }
 input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-appearance: none;
    border: 0;
  }
		</style>
	</head>
	<body>
		<input type="range" class="rangeMain" name="volume" min="4" max="20">
	</body>
</html>
